<template>
  <div class="container">
    <div class="common-header-wrap">
      <mt-header title="资金明细" class="common-header">
        <mt-button slot="left" icon="back" @click="goBack"></mt-button>
      </mt-header>
    </div>

    <div>
      <div class="agent-main">
        <div class="agent-main-left">
          <div class="agent-main-left-title">可用金额（元）</div>
          <div class="agent-main-left-price">{{user.available_predeposit}}</div>
        </div>
        <div class>
          <!-- <div class="agent-main-right" @click="goAdd">
            <div @click="goAdd">充值</div>
          </div> -->
          <div class="agent-main-right" @click="goBonus">提现</div>
          <!-- <div class="agent-main-right" @click="$router.push({name:'MemberBankList'})">提现账号</div> -->
        </div>
      </div>
    </div>
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
    >
      <!--            <div class="list-wrapper" v-if="predeposit_list && predeposit_list.length">-->
      <!--                <div class="item" v-for="(item, index) in predeposit_list" :key="item.lg_id">-->
      <!--                    <label class="title" v-bind:class="item.lg_av_amount > 0 ? 'income' : 'expend'">{{ item.lg_av_amount-->
      <!--                        }}</label>-->
      <!--                    <label class="subtitle">{{ item.lg_desc }}</label>-->
      <!--                    <label class="date">{{ item.lg_addtime_text }}</label>-->
      <!--                </div>-->
      <!--            </div>-->
      <div class="billTab">
        <div :class="type == 2? clas :''" @click="billTab(2)">资金明细</div>
        <div :class="type == 0? clas :''" @click="billTab(0)">提现明细</div>
        <div :class="type == 1? clas :''" @click="billTab(1)">添加账号</div>
      </div>
      <div class="list-wrapper" v-if="isShow">
        <div class="list-wrapper" v-if="type == 0 && withdraw_list.length">
          <div class="container" v-for="(item, index) in withdraw_list" :key="item.pdc_id">
            <div class="top-wrapper">
              <div class="left-wrapper">
                <label class="status">
                  {{
                  item.pdc_payment_state_text
                  }}
                </label>
                <label class="title">{{ item.pdc_bank_user }}：{{ item.pdc_bank_no }}</label>
              </div>
              <div class="right-wrapper">
                <label class="price">￥{{ item.pdc_amount }}</label>
                <label class="subtitle">提现金额</label>
              </div>
              <div class="top-line"></div>
            </div>
            <div class="center-wrapper">
              <label class="desc">申请时间：{{ item.pdc_addtime_text }}</label>
            </div>
          </div>
        </div>
        <div v-if="bank_list.length>0 && type == 1">
          <div v-for="item in bank_list" :key="item.bank_id">
            <div class="content">
              <div class="top-wrapper">
                <div class="title-wrapper">
                  <label class="title">{{ item.memberbank_name }}</label>
                  <label class="title">{{ item.memberbank_truename }}</label>
                </div>
                <label
                  class="desc bank-text"
                  style="-webkit-box-orient:vertical"
                >{{memberbankTypeText(item.memberbank_type)}}&nbsp;{{item.memberbank_no}}</label>
              </div>
              <div class="bottom-wrapper">
                <div class="bottom-right-wrapper">
                  <div class="edit-wrapper" @click="onEdit(item.memberbank_id)">
                    <label class="subtitle">编辑</label>
                  </div>
                  <div class="edit-wrapper delete-wrapper" @click="onDelete(item.memberbank_id)">
                    <label class="subtitle">删除</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- MemberBankList  MemberBankForm-->
          <!-- <div class="cardNumber" @click="BankForm">
            <i>+</i>
            <div>添加账号</div>
          </div> -->
          
        </div>
          <div v-if="type == 1" class="cardNumber" @click="BankForm">
            <i>+</i>
            <div>添加账号</div>
          </div>
        <div
          class="item"
          v-if="type == 2"
          v-for="(item, index) in predeposit_list"
          :key="item.lg_id"
        >
          <label class="titles">{{ item.lg_desc }}</label>
          <label class="subtitles">{{ item.lg_addtime_text }}</label>
          <label
            class="date"
            :class="item.lg_av_amount > 0 ? 'income' : 'expend'"
          >{{ item.lg_av_amount }}</label>
        </div>
      </div>
      <!-- withdraw_list && !withdraw_list.length && bank_list && !bank_list.length && predeposit_list && !predeposit_list.length -->
      <empty-record
        v-else-if="!isShow"
      ></empty-record>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import IndexInfoItem from "../index/IndexInfoItem";
import { addRecharge } from "../../../api/memberRecharge";
import { getMemberIndex } from "../../../api/member";
import { getPredepositList } from "../../../api/memberPredeposit";
import { Toast, Indicator, MessageBox } from "mint-ui";
import EmptyRecord from "../../../components/EmptyRecord";
import { getWithdrawList, addWithdraw } from "../../../api/memberWithdraw";
import { getBankList, delBank } from "../../../api/memberBank";

export default {
  name: "BalanceHistory",
  components: {
    EmptyRecord,
    IndexInfoItem
  },
  data() {
    return {
      user: "", // 用户信息
      wrapperHeight: 0,
      params: { page: 0, per_page: 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      predeposit_list: [],
      lock: true, // 锁
      type: "2",
      clas: "border",
      withdraw_list: [], //提现明细
      bank_list: [],
      isShow:true,
    };
  },
  created() {
    this.getBankList();
    this.billTab(2);
  },
  computed: {
    ...mapState({
      isOnline: state => state.member.isOnline,
      config: state => state.config.config
    }),
    memberbankTypeText() {
      return function(memberbankType) {
        if (memberbankType === "bank") {
          return "银行";
        } else if (memberbankType === "alipay") {
          return "支付宝";
        } else {
          return "账户类型错误";
        }
      };
    }
  },
  mounted() {
    this.wrapperHeight = document.documentElement.clientHeight - 90;
    this.getMemberIndex();
  },
  methods: {
    BankForm () {
      this.$router.push({ name: 'MemberBankForm', query: { action: 'add' } })
    },
    onEdit(memberbankId) {
      this.$router.push({
        name: "MemberBankForm",
        query: { memberbank_id: memberbankId }
      });
    },
    onDelete(memberbankId) {
      MessageBox.confirm("确定要删除该提现账户吗？").then(action => {
        Indicator.open();
        delBank(memberbankId).then(
          response => {
            this.getBankList();
            Indicator.close();
          },
          error => {
            Indicator.close();
            Toast(error.message);
          }
        );
      });
    },
    getWithdrawList() {
      Indicator.open();
      getWithdrawList(this.params)
        .then(res => {
          Indicator.close();
          if (res.result.hasmore) {
            this.isMore = true;
          } else {
            this.isMore = false;
          }

          let temp = res.result.list;
          if (temp) {
            if (!this.withdraw_list) {
              this.withdraw_list = temp;
            } else {
              this.withdraw_list = this.withdraw_list.concat(temp);
              // console.log(this.withdraw_list);
            }
          }
        })
        .catch(function(error) {
          Indicator.close();
          Toast(error.message);
        });
    },
    getBankList() {
      getBankList()
        .then(res => {
          this.bank_list = res.result.bank_list;
        })
        .catch(function(error) {
          Toast(error.message);
        });
    },
    billTab(value) {
      this.isShow = true;
      this.type = value;
      if(value == 1){
        this.isShow = true;
        console.log(this.isShow)
      }else if(value == 2){
        this.isShow = this.predeposit_list.length? this.isShow : false;
        console.log(this.isShow)
      }else{
        this.isShow = this.withdraw_list.length? this.isShow : false;
        console.log(this.isShow)
      }
    },
    goAdd() {},
    goBonus() {
      if (this.isOnline) {
        this.$router.push({ name: "MemberWithdrawList" });
      } else {
        this.showLogin();
      }
    },
    showLogin() {
      this.$router.push({ name: "HomeMemberLogin" });
    },
    loadMore() {
      this.loading = true;
      this.params.page = ++this.params.page;
      if (this.isMore) {
        this.loading = false;
        this.getPredepositList(true);
        this.getWithdrawList(true);
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    getPredepositList() {
      Indicator.open();
      getPredepositList(this.params)
        .then(res => {
          Indicator.close();
          if (res.result.hasmore) {
            this.isMore = true;
          } else {
            this.isMore = false;
          }

          let temp = res.result.list;
          if (temp) {
            if (!this.predeposit_list) {
              this.predeposit_list = temp;
            } else {
              this.predeposit_list = this.predeposit_list.concat(temp);
            }
          }
        })
        .catch(function(error) {
          Indicator.close();
          Toast(error.message);
        });
    },
    //获取用户信息
    getMemberIndex() {
      getMemberIndex()
        .then(res => {
          console.log(res)
          this.user = res.result.member_info;
        })
        .catch(function(error) {
          Toast(error.message);
        });
    },

    //充值
    goAdd() {
      MessageBox.prompt("请输入充值金额", "").then(({ value, action }) => {
        if (this.lock) {
          this.lock = false;
          addRecharge(value)
            .then(res => {
              this.lock = true;
              this.goToPay(0, res.result.pay_sn);
            })
            .catch(function(error) {
              this.lock = true;
              Toast(error.message);
            });
        }
      });
    },

    //前往付款页
    goToPay(state, paySn) {
      if (state == 0) {
        this.$router.push({
          name: "MemberBuyPay",
          query: { pay_sn: paySn, pay_type: "pd_pay" }
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.agent-main {
  box-sizing: border-box;
  width: 92vw;
  height: 40vw;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 4vw;
  color: white;
  background-image: url("../../../assets/image/home/agent-bg.png");
  background-size: 92vw 40vw;
  margin-top: 4vw;
  margin-bottom: 4vw;

  .agent-main-left {
    display: flex;
    flex-direction: column;

    .agent-main-left-title {
      font-size: 0.7rem;
    }

    .agent-main-left-price {
      font-size: 1.5rem;
      font-weight: bold;
    }
  }

  .agent-main-right {
    font-size: 0.7rem;
    font-weight: bold;
    padding: 3px 15px;
    border: 1px solid white;
    border-radius: 100px;
    margin-bottom: 10px;
  }
}

.header {
  border-bottom: 1px solid #e8eaed;
}

.topList {
  position: fixed;
  width: 100%;
  margin-top: 2.2rem;
  height: 2rem;
  z-index: 100;
}

.list-wrapper {
  .item {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background-color: #fff;
    border-bottom: 1px solid #eeeff2;
  }

  .titles {
    font-size: 0.7rem;
    font-weight: bold;
    margin-left: 0.7rem;
    margin-top: 0.7rem;
    width: 65vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .income {
    // color: $primaryColor !important;
    color: #000 !important;
  }

  .expend {
    color: #333 !important;
  }

  .subtitles {
    font-size: 0.6rem;
    color: #666;
    margin-left: 0.7rem;
    margin-top: 0.4rem;
    margin-bottom: 0.5rem;
  }

  .date {
    color: #666;
    font-size: 0.9rem;
    position: absolute;
    top: 0.9rem;
    right: 0.7rem;
  }
}

//账单切换
.billTab {
  display: flex;
  width: 100vw;
  padding: 10px 4vw;
  box-sizing: border-box;
  justify-content: space-between;
  background: #ffffff;
  font-size: 0.7rem;
  .border {
    padding-bottom: 10px;
    color: #3c7c45;
    border-bottom: 1px solid #3c7c45;
  }
}

// 提现明细
.list-wrapper {
  .container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background-color: #fff;
  }
  .top-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
  }
  .left-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }
  .right-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }
  .status {
    font-size: 0.7rem;
    color: #5296db;
    margin-left: 0.75rem;
    margin-top: 0.65rem;
  }
  .title {
    font-size: 0.6rem;
    color: #666666;
    margin-left: 0.75rem;
    margin-top: 0.25rem;
    margin-right: 0.5rem;
    margin-bottom: 0.2rem;
  }
  .price {
    font-size: 0.9rem;
    color: $primaryColor;
    margin-right: 0.75rem;
    margin-top: 0.5rem;
    text-align: right;
  }
  .subtitle {
    font-size: 0.6rem;
    color: #999999;
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    text-align: right;
  }
  .top-line {
    position: absolute;
    left: 0.75rem;
    bottom: 0;
    right: 0;
    height: 1px;
    background-color: #e8eaed;
  }
  .desc {
    color: #999999;
    font-size: 0.6rem;
    margin-left: 0.75rem;
    margin-top: 0.25rem;
  }
  .center-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    border-bottom: 1px solid #e8eaed;
    padding-bottom: 0.25rem;
  }
}

// 账号
.content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  width: 92vw;
  height: 35vw;
  margin: 20px auto;
  padding: 0 4vw;
  // border: 1px dashed #3C3C3C;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 10px #888888;
  // background-image: url("../../../assets/image/home/agent-bg.png");
  // background-size: 92vw 40vw;

  .top-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    margin-top: 20px;
  }
  .title-wrapper {
    height: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
  }
  .title {
    font-size: 0.8rem;
    // color: #ffffff;
    margin-left: 0.5rem;
  }
  .default {
    width: 1.4rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border: 1px solid #e93b3d;
    color: $primaryColor;
    font-size: 0.5rem;
    text-align: center;
    border-radius: 0.1rem;
  }
  .desc {
    // color: #ffffff;
    font-size: 0.7rem;
  }
  .bank-text {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 1rem;
    margin-right: 0.5rem;
  }
  .bottom-wrapper {
    height: 2.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
  }
  .bottom-right-wrapper {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
  }
  .edit-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .delete-wrapper {
    margin-right: 0.5rem;
  }
  .indicator {
    width: 1rem;
    height: 1rem;
    margin-left: 0.75rem;
    margin-right: 0.5rem;
  }
  .icon {
    width: 0.9rem;
    height: 0.9rem;
    margin-left: 0.5rem;
  }
  .subtitle {
    font-size: 0.7rem;
    // color: #ffffff;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 1rem;
    margin-right: 0.5rem;
  }
  .subtitle i {
    font-size: 0.8rem;
    margin-right: 0.5rem;
  }
}
.cardNumber{
  width: 92vw;
  height: 10vh;
  margin: auto;
  background: #ffffff;
  box-shadow: 1px 1px 5px black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  padding-left: 0.4vw;
  margin-bottom: 1rem;

  i{
    margin-left:1.5rem;
    font-size: 1.5rem;
    color: #000;
  }
  div{
    margin-left: 0.5rem;
    font-size: 0.8rem;
  }
  
}

</style>
